<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="UTF-8">
<head>
  <%@include file="/WEB-INF/include-head.jsp" %>
<!--已写在include-head页面   	
<link rel="stylesheet" href="css/pagination.css" />
<script type="text/javascript" src="script/jquery.pagination.js"></script> -->
<script type="text/javascript" src="script/myadmin.js"></script>
</head>
  <body>
  <script type="text/javascript">
  $(function() {
		// 初始化全局变量
		window.totalRecord = ${requestScope['PAGEINFO'].total};
		window.pageSize = ${requestScope['PAGEINFO'].pageSize};
		window.pageNum = ${requestScope['PAGEINFO'].pageNum-1};
		// 每一次页面最初显示的时候都会把keyword设置为最新值,搜索框的值
		window.keyWord = "${param.keyWord}";
		// 对分页导航条显示进行初始化
		initPagination();
		
		//全选框
		$("#checkall").click(function(){
			//获取多选框勾选状态，this是当前对象（DOM）
			var checkStatu=this.checked;
			//将多选狂状态设置各所以单选狂
			$(".checksingle").prop("checked",checkStatu);
		});
		//批量删除
		$("#deleteAll").click(function(){
			//创建数组，存储所选择的选项的adminID
			var adminidArray=new Array();
			//定位到单选框，遍历所有该标签的单选框,加上：checked属性表示只遍历选择过的单选框
			$(".checksingle:checked").each(function(){
				//获取每个单选框里的adminid值，
				// this表示当前遍历到的对象 ，但this.adminId拿不到值，原因是：this作为DOM对象无法读取HTML标签本身没有的属性
				// adminid是自己定义的对象，将this转换为jQuery对象调用attr()函数就能够拿到值
				var id=$(this).attr("adminid");
				//使用数组push方法将值放入数组
				adminidArray.push(id);
			});
			
			// 将JSON数组转换为JSON字符串,方便后端解析
			// var a = [1,2,3,4,5];					数组类型
			// var b = "[1,2,3,4,5]";				字符串类型
			// var c = {"userName":"tom"};			对象类型
			// var d = "{\"userName\":\"tom\"}";	字符串类型
			var requestBody = JSON.stringify(adminidArray);
			
			
			//使用ajax将选择的数组给后端实现批量删除
			batchDelAjax(requestBody);
		});
			
		
		//单条记录删除
		$(".singleDelBtn").click(function(){
			var adminidArray=new Array();
			var adminid = $(this).attr("adminid");
			//使用数组push方法将值放入数组
			adminidArray.push(adminid);
			// 将JSON数组转换为JSON字符串,方便后端解析
			var requestBody = JSON.stringify(adminidArray);
			//使用ajax将选择的数组给后端实现删除
			batchDelAjax(requestBody);
		});
		
	});

/* 	// 声明函数封装导航条初始化操作
	function initPagination() {
		
		// 声明变量存储总记录数
		var totalRecord = ${requestScope['PAGEINFO'].total};
		var pagesize=${requestScope['PAGEINFO'].pageSize};
		var pagenum=${requestScope['PAGEINFO'].pageNum - 1};
		// 声明变量存储分页导航条显示时的属性设置
		var paginationProperties = {
				num_edge_entries : 1,			//边缘页数
				num_display_entries : 5,		//主体页数
				callback : pageselectCallback,	//回调函数
				items_per_page : pagesize,	//每页显示数据数量，就是pageSize
				current_page : pagenum,	//当前页页码
				prev_text : "上一页",			//上一页文本
				next_text : "下一页"			//下一页文本
		};
		
		// 显示分页导航条
		$("#Pagination").pagination(totalRecord, paginationProperties);
	}

	// 在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
	function pageselectCallback(pageIndex, jq) {
		
		// pageIndex从0开始，pageNum从1开始
		var pageNum = pageIndex + 1;
		
		// 跳转页面
		window.location.href = "admin/query/for/search.html?pageNum="+pageNum+"&keyWord=${param.keyWord}";
		
		return false;
	}
	
	
	//ajax
	function batchDelAjax(requestBody){
		//使用ajax将选择的数组给后端实现批量删除
		$.ajax({
			"url":"admin/batch/remove.json",
			"type":"post",
			"contentType":"application/json;charset=UTF-8",
			"data":requestBody,
			"dataType":"json", 
			"success":function(response) {
				var result=response.result;
				console.log(response);
				if(result == "SUCCESS"){
				window.location.href="admin/query/for/search.html?pageNum="+${PAGEINFO.pageNum}+"&keyWord=${param.keyWord}";
				
				}else if(result == "FAILED"){
					alert(response.message);
					return;
				}
			},
			"error":function(response) {
				alert(response.message);
				return;
			}
		});
	} */
  </script>
	<!-- nav -->
	<%@include file="/WEB-INF/include-nav.jsp" %>
    <div class="container-fluid">
      <div class="row">
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
					</div>
					<div class="panel-body">
							<form action="admin/query/for/search.html" class="form-inline" role="form" style="float:left;" method="post">
							<div class="form-group has-feedback">
								<div class="input-group">
									<div class="input-group-addon">查询条件</div>
									<input name="keyWord" class="form-control has-success" type="text" placeholder="请输入查询条件">
								</div>
							</div>
							<button type="submit" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
							</form>
						<button id="deleteAll" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
						<a type="button" class="btn btn-primary" style="float:right;" href="admin/to/addview.html"><i class="glyphicon glyphicon-plus"></i> 新增</a>
						<br>
						<hr style="clear:both;">
						<div class="table-responsive">
							<table class="table  table-bordered">
								<thead>
									<tr >
									  <th width="30"><input id="checkall" type="checkbox"></th>
									  <th>账号</th>
									  <th>名称</th>
									  <th>邮箱地址</th>
									  <th width="100">操作</th>
									</tr>
								</thead>
								<tbody>
								<c:if test="${empty requestScope['PAGEINFO'].list }">
									<tr><td colspan="6">抱歉！没有查询到数据</td></tr>							
								</c:if>
								<c:if test="${!empty requestScope['PAGEINFO'].list }">
									<c:forEach items="${requestScope['PAGEINFO'].list }" var="admin">
									<tr>
									  <td><input class="checksingle" adminid="${admin.id }" type="checkbox"></td>
									  <td>${admin.loginAcct }</td>
									  <td>${admin.userName}</td>
									  <td>${admin.email}</td> 
									  <td>
										  <a class="btn btn-success btn-xs" href="assign/to/assign-role.html?adminid=${admin.id }&pageNum=${requestScope['PAGEINFO'].pageNum }"><i class=" glyphicon glyphicon-check"></i></a>
										  <a class="btn btn-primary btn-xs" href="admin/to/editView.html?id=${admin.id }&pageNum=${requestScope['PAGEINFO'].pageNum }">
										  <i class=" glyphicon glyphicon-pencil"></i>
										  </a>
										  <button type="button" adminid="${admin.id }" class="btn btn-danger btn-xs singleDelBtn" ><i class=" glyphicon glyphicon-remove"></i></button>
									  </td>
									</tr>
									</c:forEach>
								</c:if>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="6" align="center">
											<div id="Pagination" class="pagination">
											<!-- 这里显示分页 -->
											</div>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
				</div>

        </div>
      </div>
    </div>

  </body>
</html>